<template>
  <t-modal
    :title="title"
    :width="650"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item class="hiddenItem">
          <!-- uuid隐藏 -->
          <a-input v-decorator="['uuid']" disabled type="hidden" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('connectionName', '连接名称')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入连接名称"
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '请输入正确参数' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('driverClass', '连接驱动')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                :size="size"
                v-decorator="[
                  'driverClass',
                  { required: true, initialValue: 'com.mysql.cj.jdbc.Driver' },
                ]"
              >
                <a-select-option value="com.mysql.cj.jdbc.Driver">
                  MySQL
                </a-select-option>
                <a-select-option value="oracle.jdbc.OracleDriver">
                  Oracle
                </a-select-option>
                <a-select-option
                  value="com.microsoft.sqlserver.jdbc.SQLServerDriver"
                >
                  SqlServer
                </a-select-option>
                <a-select-option value="org.postgresql.Driver">
                  PostgreSQL
                </a-select-option>
                <a-select-option value="dm.jdbc.driver.DmDriver">
                  达梦数据库
                </a-select-option>
                <a-select-option value="com.kingbase8.Driver">
                  人大金仓数据库
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('connectionAccount', '连接账号')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入连接账号"
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入正确参数' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('connectionPassword', '连接密码')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-password
                placeholder="请输入连接密码"
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入正确参数' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span slot="label">
                {{ $ct("connectionAddress", "连接地址") }}&nbsp;
                <a-tooltip
                  placement="top"
                  overlayClassName="custom-tip"
                  arrowPointAtCenter
                  autoAdjustOverflow
                >
                  <template slot="title">
                    <div style="display: flex;">
                      <div>
                        <p style="margin-bottom: 8px;">
                          <span style="font-size: 18px;">MySQL: </span>
                          jdbc:mysql://192.168.1.203:3329/_cloud_vue?characterEncoding=UTF-8&useSSL=true&serverTimezone=Asia/Shanghai&useInformationSchema=true
                        </p>
                        <p style="margin-bottom: 8px;">
                          <span style="font-size: 18px;">PostgreSQL: </span>
                          jdbc:postgresql://192.168.1.203:5432/_cloud_vue_postgresql
                        </p>
                        <p style="margin-bottom: 8px;">
                          <span style="font-size: 18px;">Oracle: </span>
                          jdbc:oracle:thin:@192.168.1.206:1521:ZUOYOUR
                        </p>
                        <p style="margin-bottom: 8px;">
                          <span style="font-size: 18px;">SqlServer: </span>
                          jdbc:sqlserver://192.168.1.66:1433;DatabaseName=_cloud_vue_sqlserver
                        </p>
                        <p style="margin-bottom: 8px;">
                          <span style="font-size: 18px;">达梦数据库: </span>
                          jdbc:dm://192.168.1.203:5236/_cloud_vue_dm
                        </p>
                        <p style="margin-bottom: 4px;">
                          <span style="font-size: 18px;">人大金仓数据库: </span>
                          jdbc:kingbase8://192.168.1.203:54321/_cloud_vue_kingbase
                        </p>
                      </div>
                    </div>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip>
              </span>
              <a-textarea
                placeholder="请输入连接地址"
                :rows="4"
                v-decorator="[
                  'url',
                  { rules: [{ required: true, message: '请输入正确参数' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('remarks', '备注')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-textarea
                placeholder="请输入备注"
                v-decorator="[
                  'remark',
                  { rules: [{ required: false, message: '请输入正确参数' }] },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

    <template slot="footer">
      <a-button
        @click="
          () => {
            $emit('dbtest');
          }
        "
        >{{ $ct("testConnection", "测试连接") }}</a-button
      >
      <a-button
        @click="
          () => {
            $emit('cancel');
          }
        "
        >{{ $ct("cancel", "关闭") }}</a-button
      >
      <a-button
        type="primary"
        @click="
          () => {
            $emit('ok');
          }
        "
        >{{ $ct("save", "保存") }}</a-button
      >
    </template>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
  "uuid",
  "name",
  "driverClass",
  "url",
  "username",
  "password",
  "remark",
  "status",
  "isDeleted",
  "creatorId",
  "creator",
  "createTime",
  "modifierId",
  "modifier",
  "modifyTime",
  "creatorOrgId",
];

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      title: "",
      size: "default",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      form: this.$form.createForm(this),
    };
  },
  methods: {
    add(m, data) {
      console.log(m, data);
    },
    edit(m, data) {
      console.log(m, data);
    },
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
};
</script>
<style lang="less">
.custom-tip {
  max-width: 600px !important;
  min-width: 600px !important;

  p {
    color: #000;
  }

  .ant-tooltip-arrow::before {
    background-color: rgba(243, 243, 243, 1) !important;
  }

  .ant-tooltip-inner {
    background-color: rgba(243, 243, 243, 1) !important;
  }
}
</style>
